<template>
  <div class="BedpadManagement">
    <!-- 状态栏 -->
    <el-row>
      <el-col style="display:flex;align-items: center;margin-bottom:10px;">
        <div class="border"></div>
        <h3>{{cameraManagement.title}}</h3>
      </el-col>
    </el-row>
    <el-row>
      <el-row style="display:flex;align-items: center;margin-left:20px">
        <el-col :span="16">
          <el-button
            class="addBtn boxShadowButton"
            icon="el-icon-circle-plus"
            style="margin-right:40px"
            @click="add"
          >{{cameraManagement.add}}</el-button>
          <span>{{cameraManagement.search}}</span>
          <el-input
            style="width:260px;margin-right:10px"
            v-model.trim="formInline.deviceNo"
            :placeholder="cameraManagement.deviceNo"
            @keyup.enter.native.prevent="enterSearchMember"
          ></el-input>
          <el-button class="searchBtn boxShadowButton" @click="search">{{cameraManagement.check}}</el-button>
        </el-col>
        <el-col :span="8" align="right">
          <el-button
            class="prevPage boxShadowButton"
            :disabled="pageNum==firstPage"
            @click="handlePrevPage"
          >{{$t('m.prevPage')}}</el-button>
          <el-button
            class="nextPage boxShadowButton"
            :disabled="pageNum==lastPage"
            @click="handleNextPage"
          >{{$t('m.nextPage')}}</el-button>
        </el-col>
      </el-row>
    </el-row>

    <!-- 摄像头列表 -->
    <el-row>
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        style="width: 100%;margin-top:10px;margin-left:20px"
        :row-style="tableRowStyle"
        :header-cell-style="tableHeaderColor"
      >
        <el-table-column
          prop="deviceNo"
          :label="cameraManagement.sort"
          min-width="100"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="deviceName"
          :label="cameraManagement.name"
          min-width="100"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="buildingName"
          :label="cameraManagement.floor"
          min-width="100"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.buildingName=='' || scope.row.buildingName==undefined || scope.row.buildingName==null"
            >--</span>
            <span v-else>{{scope.row.buildingName}}</span>
          </template>
        </el-table-column>
        <!-- 测试说要注释掉 -->
        <!-- <el-table-column
          prop="floorNo"
          :label="cameraManagement.floor"
          min-width="100"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.floorNo=='' || scope.row.floorNo==undefined || scope.row.floorNo==null"
            >--</span>
            <span v-else>{{scope.row.floorNo}}</span>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="roomNo"
          :label="cameraManagement.roomNo"
          min-width="100"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.roomNo=='' || scope.row.roomNo==undefined || scope.row.roomNo==null"
            >--</span>
            <span v-else>{{scope.row.roomNo}}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="cameraManagement.oldman"
          min-width="100"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.oldmanName=='' || scope.row.oldmanName==undefined || scope.row.oldmanName==null"
            >--</span>
            <span v-else>{{scope.row.oldmanName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="cameraManagement.status"
          min-width="100"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.status=='online'"
              style="color:green;cursor: pointer;"
              @click="equipmentstatus(scope.row)"
            >{{cameraManagement.online}}</span>
            <span
              v-else
              style="color:red;cursor: pointer;"
              @click="equipmentstatus(scope.row)"
            >{{cameraManagement.offline}}</span>
          </template>
        </el-table-column>
        <el-table-column :label="cameraManagement.dosth" min-width="400" align="center">
          <template slot-scope="scope">
            <!-- <el-button
              class="editBtn boxShadowButton"
              @click="handleEdit(scope.row)"
              :size="size"
            >{{cameraManagement.fix}}</el-button>-->
            <!-- <el-button
              class="editBtn boxShadowButton"
              @click="handleArea(scope.row)"
              :size="size"
            >{{cameraManagement.areaSet}}</el-button>-->
            <el-button
              v-if="scope.row.bind==false"
              class="detailBtn boxShadowButton"
              @click="bangding(scope.row)"
              :size="size"
            >{{cameraManagement.bangding}}</el-button>
            <el-button
              v-if="scope.row.bind==true"
              class="jiebangBtn boxShadowButton"
              @click="unBind(scope.row)"
              :size="size"
            >{{cameraManagement.jiebang}}</el-button>
            <el-button
              class="deleteBtn boxShadowButton"
              @click="deleteClick(scope.row)"
              :size="size"
            >{{$t('m.delete')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        layout="total, prev, pager, next, jumper"
        :total="totalDataNumber"
        :page-size="pageSize"
        align="center"
        class="fenye"
      ></el-pagination>
    </el-row>

    <!-- 摄像头的绑定弹框 -->
    <el-dialog
      :title="cameraManagement.bangding"
      :visible.sync="dialogVisible"
      width="30%"
      @close="closeBangding"
      class="deviceDialog"
      :center="true"
    >
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-position="top"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="12" align="center">
            <el-tooltip class="item" effect="dark" :content="backList.deviceNo" placement="bottom">
              <el-form-item
                class="deviceDialog-contentOne"
                :label="cameraManagement.sort"
              >{{backList.deviceNo}}</el-form-item>
            </el-tooltip>
          </el-col>
          <el-col :span="12">
            <el-form-item
              class="deviceDialog-contentTwo"
              :label="cameraManagement.build"
              prop="build"
            >
              <el-select v-model="ruleForm.build" @change="changeBuild">
                <el-option
                  v-for="item in buildList"
                  :key="item.value"
                  :label="item.buildingName"
                  :value="item.buildingId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" align="center">
            <el-tooltip
              class="item"
              effect="dark"
              :content="backList.deviceName"
              placement="bottom"
            >
              <el-form-item
                class="deviceDialog-contentOne"
                :label="cameraManagement.name"
              >{{backList.deviceName}}</el-form-item>
            </el-tooltip>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item
              class="deviceDialog-contentTwo"
              :label="cameraManagement.floor"
              prop="floor"
              ref="floor"
            >
              <el-select v-model="ruleForm.floor" @change="changeFloor">
                <el-option
                  v-for="item in floorList"
                  :key="item.floorNo"
                  :label="item.floorNo"
                  :value="item.floorNo"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item
              class="deviceDialog-contentTwo"
              :label="cameraManagement.roomNo"
              prop="room"
              ref="room"
            >
              <el-select v-model="ruleForm.room" @change="changeRoom">
                <el-option
                  v-for="item in roomList"
                  :key="item.value"
                  :label="item.roomNo"
                  :value="item.roomId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" align="center">
            <el-tooltip class="item" effect="dark" :content="oldName" placement="bottom">
              <el-form-item
                class="deviceDialog-contentOne"
                :label="cameraManagement.oldman"
              >{{oldName}}</el-form-item>
            </el-tooltip>
          </el-col>
          <!-- life不需要楼层,为了页面美观,移动到上面 -->
          <!-- <el-col :span="12">
            <el-form-item
              class="deviceDialog-contentTwo"
              :label="cameraManagement.roomNo"
              prop="room"
              ref="room"
            >
              <el-select v-model="ruleForm.room" @change="changeRoom">
                <el-option
                  v-for="item in roomList"
                  :key="item.value"
                  :label="item.roomNo"
                  :value="item.roomId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button
          class="deleteBtn boxShadowButton"
          :size="size"
          @click="bangdingForm('ruleForm')"
        >{{cameraManagement.yes}}</el-button>
        <el-button
          class="cancelBtn boxShadowButton"
          :size="size"
          @click="dialogVisible = false"
        >{{cameraManagement.no}}</el-button>
      </div>
    </el-dialog>
    <!-- 解绑 -->
    <el-dialog
      :title="cameraManagement.jiebangTitle"
      :visible.sync="jiebangDialogVisible"
      width="30%"
      :center="true"
    >
      <h3 style="text-align:center">{{cameraManagement.jiebangWordCamera}}</h3>
      <span slot="footer" class="dialog-footer">
        <el-button
          class="deleteBtn boxShadowButton"
          @click="jiebangCheck"
          :size="size"
        >{{cameraManagement.yes}}</el-button>
        <el-button
          class="cancelBtn boxShadowButton"
          :size="size"
          @click="jiebangDialogVisible = false"
        >{{cameraManagement.no}}</el-button>
      </span>
    </el-dialog>

    <!-- 删除 -->
    <el-dialog
      :title="cameraManagement.deleteDevice"
      :visible.sync="deletDialogVisible"
      width="30%"
      :center="true"
    >
      <h3 style="text-align:center">{{cameraManagement.sureDelete}}</h3>
      <span slot="footer" class="dialog-footer">
        
        <el-button
          class="deleteBtn boxShadowButton"
          @click="delet"
          :size="size"
        >{{cameraManagement.yes}}</el-button>

        <el-button
          class="cancelBtn boxShadowButton"
          :size="size"
          @click="deletDialogVisible = false"
        >{{cameraManagement.no}}</el-button>

      </span>
    </el-dialog>
    <!-- 报警区域弹出层 -->
    <el-dialog
      :visible.sync="showAreaDialogFlag"
      :close-on-click-modal="false"
      width="800px"
      center
      class="wrapper"
    >
      <div slot="title">{{cameraManagement.areaSet}}</div>
      <div style="margin-left:5px">
        <img
          src="../../../assets/wuchangimg/juxing.png"
          style="vertical-align:middle;font-size:16px"
        />
        <span
          style="vertical-align:middle;font-size:18px;"
          class="black"
        >{{cameraManagement.cameraAreaAdd}}</span>
      </div>
      <div class="example-2 auto-width">
        <div class="left">
          <el-col class="mag">
            <el-button
              type="primary"
              :disabled="quyulist.length>4"
              @click="addArea"
              size="small"
            >{{cameraManagement.areaAdd}}</el-button>
            <!-- <el-button type="primary" :disabled="areaFlag==1" @click="deleteArea" size="small">
              区域删除
            </el-button>-->
            <!-- by guo 2020-3-31-09:03 修改  去除下拉框的 v-if="showAreaName==false" -->
            <el-select
              v-model="quyuvalue"
              @change="changeArea"
              :placeholder="cameraManagement.changeArea"
              style="width:120px;margin-left:8px"
              size="small"
            >
              <el-option
                v-for="item in quyulist"
                :key="item.id"
                :label="item.planName"
                :value="item.id"
              ></el-option>
            </el-select>
            <!-- by guo 2020-3-31-09-修改 注释 -->
            <!-- <el-input v-model="addAreaName" v-if="showAreaName==true" readonly style="width:120px;margin-left:8px" size="small"></el-input> -->
          </el-col>
          <canvas
            class="canvas"
            id="canvas"
            width="320"
            height="320"
            @mousedown="canvasDown($event)"
            ref="canvas"
          >{{cameraManagement.cameraCanvasMsg}}</canvas>
          <!-- by guo 2020-3-17-13:57添加 img-->
          <img class="canvas-img" ref="conf0" :src="picture" />
          <div class="mag">
            <el-button
              type="primary"
              v-if="isShowEdit"
              @click="clear"
              size="small"
            >{{cameraManagement.resetMade}}</el-button>
            <el-button
              type="primary"
              v-if="isShowEdit"
              @click="deleteOne"
              size="small"
            >{{cameraManagement.cancelMade}}</el-button>
            <el-button type="primary" @click="enterAdd" size="small">{{cameraManagement.enter}}</el-button>
          </div>
        </div>
        <div class="right">
          <div class="scorll">
            <div class="pp">{{cameraManagement.madeTuXing}}</div>
            <p
              class="pp"
              v-for="(item,index) in points"
              :key="index"
            >{{index+1}}. ({{item.x}},{{item.y}})</p>
          </div>
          <div style="margin-top:10px;float:right;margin-right:8px">
            <el-button type="primary" @click="enterSelect" size="small">{{cameraManagement.enter}}</el-button>
            <el-button type="primary" @click="handleCancel" size="small">{{cameraManagement.cancel}}</el-button>
          </div>
        </div>
      </div>
      <el-dialog
        width="30%"
        :title="areaFlag==1 ? cameraManagement.addArea : cameraManagement.editArea"
        :visible.sync="innerVisible"
        center
        append-to-body
      >
        <div style="display:flex">
          <label style="margin-top: 10px;width: 85px;">{{cameraManagement.areaName}}</label>
          <el-input style="width:260px;" maxlength="8" v-model.trim="addAreaName"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="interenter" size="small">{{cameraManagement.enter}}</el-button>
          <el-button type="primary" @click="interCancel" size="small">{{cameraManagement.cancel}}</el-button>
        </span>
      </el-dialog>
    </el-dialog>

    <!-- 设备离线状态弹窗 -->
    <el-dialog
      :title="equipmentStatus.status"
      :visible.sync="statusDialogVisible"
      width="40%"
      :center="true"
      @close="closeStatusDialogVisible"
    >
      <span>
        <el-table
          :data="statusList"
          :row-style="tableRowStyle"
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column type="index" :label="equipmentStatus.sort" width="100" align="center"></el-table-column>
          <el-table-column prop="deviceNo" :label="equipmentStatus.name" align="center"></el-table-column>
          <el-table-column prop="createdTime" :label="equipmentStatus.updataTime" align="center"></el-table-column>
          <el-table-column prop="online" :label="equipmentStatus.online" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.online==1" style="color:green">{{cameraManagement.online}}</span>
              <span v-else style="color:red">{{cameraManagement.offline}}</span>
            </template>
          </el-table-column>
        </el-table>
      </span>
      <span>
        <!-- 分页 -->
        <el-pagination
          background
          layout="total,prev, pager, next,jumper"
          :total="listTotal"
          style="margin-top:20px"
          align="center"
          class="fenye"
          @current-change="listChangePage"
          :current-page="listCurrentPage"
        ></el-pagination>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="statusDialogVisible = false">{{cameraManagement.check}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import bus from "../../../vuex/eventBus"; //引入eventBus,接收子界面传递的跳转指令,然后在父界面跳转,添加tab
export default {
  name: "CameraManagement",
  data() {
    return {
      cameraManagement: this.$t("m.cameraManagement"), //引入 lang 里面的字符串资源,
      equipmentStatus: this.$t("m.equipmentStatus"), //引入 lang 里面的字符串资源,
      size: "mini",
      formInline: {
        deviceNo: ""
      },
      dialogVisible: false,
      jiebangDialogVisible: false,
      deletDialogVisible: false,
      statusDialogVisible: false, //设备离线列表弹窗
      tableData: [],
      backList: {}, //回显的信息
      oldName: "", //绑定回显老人姓名
      ruleForm: {
        build: "",
        floor: "",
        room: ""
      },
      buildList: [],
      buildingId: 0,
      buildingName: "",
      floorList: [],
      floorNo: 0,
      roomList: [],
      roomName: "",
      roomId: 0,
      tableLoading: false, //表格加载的loading
      /* 分页的 */
      currentPage: 1, //初始页
      pageNum: 1, //页码
      pageSize: 10, //每页显示的条数
      totalDataNumber: 0, //数据的总数,
      id: "",
      firstPage: "", //第一页
      lastPage: "", //最后一页
      acceptLanguage: "ja_JP", //数据请求传参需要传的语言  ja_JP----日文
      //摄像头不报警区域；
      points: [],
      showAreaDialogFlag: false,
      innerVisible: false,
      areaIndex: 0, //选中的index；
      areaFlag: 0, //新增的时候置为1，修改的时候置为2，默认为0，但是没有区域的时候置为1；
      canvas: "",
      quyuvalue: "",
      isShowEdit: false,
      addAreaName: "",
      quyulist: [],
      ctx: {},
      areacurrentDeviceId: "", //当前设置不报警区域的摄像头Id
      id: "",
      firstPage: "", //第一页
      lastPage: "", //最后一页
      acceptLanguage: "ja_JP", //数据请求传参需要传的语言  ja_JP----日文
      statusList: [], //设备离线列表
      listTotal: 0, //设备死活数
      listCurrentPage: 1, //设备死活当前页面
      listPageNum: 1,
      listdeviceId: "",
      picture: "", //获取摄像头拍摄的图片
      showAreaName: false, //by guo 2020-3-23-11：14添加  区域名称select下拉框或者input框的显示和隐藏  默认是显示下拉框  只有新建了一个方案才回显报警区域名称
      planId: "", //by guo 2020-3-30--16:57添加  新增时的方案id
      editFlag: false //by guo 2020-3-31-9:58添加
    };
  },
  computed: {
    rules() {
      return {
        build: [
          {
            required: true,
            message: this.$t("m.equipmentAdd.null"),
            trigger: "change"
          }
        ],
        floor: [
          {
            required: true,
            message: this.$t("m.equipmentAdd.null"),
            trigger: "change"
          }
        ],
        room: [
          {
            required: true,
            message: this.$t("m.equipmentAdd.null"),
            trigger: "change"
          }
        ]
      };
    }
  },
  methods: {
    /* 
      查询图片
    */
    getPicture(deviceNo) {
      if (deviceNo != "") {
        let params = new Object();
        params.deviceNo = deviceNo;
        console.log(params);
        this.$postForm(
          "dmc/camera/getPicture",
          params,
          this.acceptLanguage
        ).then(res => {
          console.log(res, "查询拍摄的图片");
          if (res.code == 200) {
            if (res.result != null) {
              if (res.result.picture != "") {
                var backgroundImage = res.result.pictureUrl; //by guo 2020-2-29-11:51修改  后端修改了图片返回的格式
                this.picture = backgroundImage; //by guo 2020-2-29-11:51修改  后端修改了图片返回的格式
              } else {
                this.picture = "";
              }
            } else {
              this.picture = "";
            }
          }
        });
      }
    },

    /* 
      by guo 2020-3-23-9:50添加
      关闭区域设置的弹框
    */
    handleCancel() {
      this.showAreaDialogFlag = false;
      this.points = []; //清除右边的坐标
      this.drawPolygon(this.points); //清除左边的图形
      this.showAreaName = false; //select下拉框框显示
      this.editFlag = false; //by guo 2020-3-31-9:58添加
    },

    //摄像头不报警区域开始
    addArea() {
      this.isShowEdit = true;
      this.areaFlag = 1; //新增标志；
      this.points = [];
      this.addAreaName = "";
      this.drawPolygon(this.points);
    },
    //选中某个区域,外层的enter按钮；
    enterSelect() {
      if (this.areaFlag != 0 && this.quyulist.length != 0) {
        this.$message({
          message: this.cameraManagement.areaSave,
          type: "error"
        });
        return;
      }
      if (this.quyulist.length == 0) {
        this.showAreaDialogFlag = false;
        return;
      }
      console.log(this.areaIndex);
      console.log(this.quyulist);
      if (this.areaIndex == -1) {
        this.showAreaDialogFlag = false;
        return;
      }
      if (this.areaIndex > this.quyulist.length - 1) {
        this.showAreaDialogFlag = false;
        return;
      }

      // var params={
      //   deviceId:this.areacurrentDeviceId,
      //   planName:this.quyulist[this.areaIndex].planName,
      //   id:this.quyulist[this.areaIndex].id,
      //   list:this.quyulist[this.areaIndex].list,
      //   // size:{
      //   //   width:320,
      //   //   height:320
      //   // }
      //   //by guo 2020-3-19-11:46修改
      //   width:320,
      //   height:320,
      // }
      // this.$postJson(
      //   "dmc/camera/useUnalertAeraPlan",
      //   params,
      //   this.acceptLanguage
      // ).then(res =>{
      //     if(res.code == 200){
      //       this.$message({ message: res.message, type: "success" });
      //       this.showAreaDialogFlag = false;
      //     }else{
      //       this.$message({ message: ''+res.message, type: "error" });
      //     }
      // })
      console.log(this.areaIndex, "this.areaIndex-------------");
      //by guo 2020-3-20-13:19修改  后端参数变更
      //by guo 2020-3-30-16:49修改 判断是新增（提交planId）   还是修改的(提交this.quyulist[this.areaIndex].id)
      let planId = "";
      if (
        this.planId != "" &&
        this.planId != null &&
        this.planId != undefined
      ) {
        planId = this.planId;
      } else {
        planId = this.quyulist[this.areaIndex].id;
      }
      // let planId=this.quyulist[this.areaIndex].id;
      this.$postJson(
        "dmc/camera/useUnalertAeraPlan/" + planId,
        {},
        this.acceptLanguage
      ).then(res => {
        if (res.code == 200) {
          this.planId = ""; //by guo 2020-3-30-16:52添加  清空新增提交的palanId
          this.$message({ message: res.message, type: "success" });
          this.showAreaDialogFlag = false;
          this.showAreaName = false; //select下拉框框显示
          this.editFlag = false; //by guo 2020-3-31-9:58添加
        } else {
          this.$message({ message: "" + res.message, type: "error" });
        }
      });
    },
    //获取
    handleArea(row) {
      this.getPicture(row.deviceNo); //获取图片  by guo 2020-3-17-13:25添加
      this.showAreaDialogFlag = true;
      console.log(row);
      this.areacurrentDeviceId = row.id;
      var params = {};
      this.$postJson(
        "dmc/camera/listUnalertAeraPlan/" + this.areacurrentDeviceId,
        params,
        this.acceptLanguage
      ).then(res => {
        console.log(res);
        var list = [];
        var result = "";
        //没有的时候默认新增；
        if (res.result.length == 0) {
          this.areaFlag = 1;
          this.areaIndex = 0;
          this.points = [];
          this.addAreaName = "";
          this.isShowEdit = true;
        } else {
          this.areaFlag = 0; //不可编辑；
          this.isShowEdit = true;
        }
        for (var i = 0; i < res.result.length; i++) {
          if (res.result[i].status != 0) {
            result = res.result[i].id; //当前选择的数据
            this.points = res.result[i].list;
            // this.areaIndex = i+1;
            this.areaIndex = i; //by guo 2020-3-20-14:09修改
            this.addAreaName = res.result[i].planName;
          }
          list.push(res.result[i]);
        }
        this.quyulist = list;
        this.quyuvalue = result;
        this.drawPolygon(this.points);
      });
      this.show();
      console.log(this.areaIndex, "this.areaIndex0000");
    },
    changeArea(value) {
      console.log(value);
      for (var i = 0; i < this.quyulist.length; i++) {
        if (this.quyulist[i].id == value) {
          var points = [];
          for (var j = 0; j < this.quyulist[i].list.length; j++) {
            points.push(this.quyulist[i].list[j]);
          }
          this.points = points;
          this.areaIndex = i;
          this.areaFlag = 0;
          var araname = this.quyulist[i].planName;
          this.addAreaName = araname;
          this.drawPolygon(this.points);
          break;
        }
      }
      console.log(this.areaIndex, "this.areaIndex1111");
    },

    /* 
      取消方案添加或者修改   
    */
    interCancel() {
      this.innerVisible = false;
      this.showAreaName = false; //select下拉框框显示
    },

    interenter() {
      this.showAreaName = true; //input框显示
      console.log(this.areaFlag, this.quyulist, this.areaIndex);
      if (this.points.length < 3) {
        this.$message({ message: this.cameraManagement.area3, type: "error" });
        return;
      }
      if (this.addAreaName == "" || this.addAreaName.length < 1) {
        this.$message({
          message: this.cameraManagement.areaEnterName,
          type: "error"
        });
        return;
      }
      if (this.areaFlag == 1) {
        this.editFlag = false; //by guo 2020-3-31-9:58添加
        var params = {
          deviceId: this.areacurrentDeviceId,
          planName: this.addAreaName,
          list: this.points,
          // size:{
          //     width:320,
          //     height:320
          //   }
          //by guo 2020-3-19-11:46修改
          width: 320,
          height: 320
        };
        this.$postJson(
          "dmc/camera/addUnalertAeraPlan",
          params,
          this.acceptLanguage
        ).then(res => {
          if (res.code == 200) {
            //新增成功；
            //重新获取数据
            this.$message({ message: res.message, type: "success" });
            this.areaFlag = 0;
            this.getAreaList();
            this.planId = res.result; //by  guo 2020-3-30-16:55添加  获取新增方案id
          } else {
            this.$message({ message: "" + res.message, type: "error" });
          }
        });
      } else if (this.areaFlag == 2) {
        //修改；
        this.planId = ""; //by  guo 2020-3-30-16:55添加  清空planId
        console.log(this.areaIndex);
        var params = {
          deviceId: this.areacurrentDeviceId,
          planName: this.addAreaName,
          id: this.quyulist[this.areaIndex].id,
          list: this.points,
          // size:{
          //   width:320,
          //   height:320
          // }
          //by guo 2020-3-19-11:46修改
          width: 320,
          height: 320
        };
        this.$postJson(
          "dmc/camera/updateUnalertAeraPlan",
          params,
          this.acceptLanguage
        ).then(res => {
          if (res.code == 200) {
            //重新获取数据
            this.$message({ message: res.message, type: "success" });
            this.areaFlag = 0;
            this.getAreaList();
            this.editFlag = true; //by guo 2020-3-31-9:58添加
          } else {
            this.$message({ message: "" + res.message, type: "error" });
          }
        });
      }
    },
    getAreaList() {
      var params = {};
      this.$postJson(
        "dmc/camera/listUnalertAeraPlan/" + this.areacurrentDeviceId,
        params,
        this.acceptLanguage
      ).then(res => {
        var list = [];
        for (var i = 0; i < res.result.length; i++) {
          list.push(res.result[i]);
          // if(res.result[i].status !=0){
          //     this.quyuvalue = res.result[i].id; //当前选择的数据
          // }
          //by guo 2020-3-31-09:54修改
          if (
            this.planId != "" &&
            this.planId != null &&
            this.planId != undefined
          ) {
            //新增时下拉框的回显
            this.quyuvalue = String(this.planId);
          } else {
            if (this.editFlag) {
              //修改时下拉框的回显
              this.quyuvalue = this.quyulist[this.areaIndex].id;
            } else {
              //打开报警区域时下拉框的回显 没有做新增和修改的操作
              if (res.result[i].status != 0) {
                this.quyuvalue = res.result[i].id; //当前选择的数据
              }
            }
          }
        }
        this.quyulist = list;
        this.innerVisible = false;
      });
    },
    clear() {
      this.points = [];
      //重新绘制就是修改；
      if (this.areaFlag == 0) {
        this.areaFlag = 2;
      }
      this.drawPolygon(this.points);
    },
    enterAdd() {
      if (this.areaFlag == 0) {
        this.$message({
          message: this.cameraManagement.areaResetMessage,
          type: "error"
        });
      } else {
        this.innerVisible = true;
      }
    },
    deleteOne() {
      var points = [];
      for (var i = 0; i < this.points.length - 1; i++) {
        points.push(this.points[i]);
      }
      this.points = points;
      if (this.areaFlag == 0) {
        this.areaFlag = 2;
      }
      this.drawPolygon(this.points);
    },
    show() {
      //防抖
      setTimeout(() => {
        console.log(this.$refs);
        this.canvas = this.$refs.canvas;
        console.log(this.canvas);
        this.ctx = this.canvas.getContext("2d"); //设置2D渲染区域
        this.ctx.lineWidth = 2; //设置线的宽度
      }, 0);
    },
    canvasDown(event) {
      console.log(event);
      console.log(this.points, this.points.length);
      if (event.button == 0 && this.areaFlag != 0) {
        // var x = event.pageX - this.canvas.getBoundingClientRect().x;
        // var y = event.pageY - this.canvas.getBoundingClientRect().y;
        var x = event.offsetX; //by guo 2020-3-30-19:18修改  上面的写法会有bug
        var y = event.offsetY; //by guo 2020-3-30-19:18修改  上面的写法会有bug
        // x = Number(x).toFixed(0);
        // y = Number(y).toFixed(0);
        x = Number(x).toFixed(0) < 0 ? 0 : Number(x).toFixed(0); //2020-3-23-9:56guo修改 修复横坐标为负数的bug
        y = Number(y).toFixed(0) < 0 ? 0 : Number(y).toFixed(0); //2020-3-23-9:56guo修改 修复纵坐标为负数的bug
        // if(this.points.length>50){
        if (this.points.length + 1 > 50) {
          //by guo 2020-3-23-10:44修改
          this.$message({
            message: this.cameraManagement.area50,
            type: "error"
          });
          return;
        }
        this.points.push({
          x: x,
          y: y
        });
        this.drawPolygon(this.points);
      }
    },
    drawPolygon(points) {
      this.ctx.clearRect(0, 0, 640, 640);
      this.ctx.strokeStyle = "#000";
      this.ctx.beginPath();
      if (points.length > 0) {
        this.ctx.fillStyle = "#FF0000";
        this.ctx.arc(points[0].x, points[0].y, 2, Math.PI * 2, 0, true);
        this.ctx.moveTo(points[0].x, points[0].y);
        for (var i = 1; i < points.length; i++) {
          this.ctx.fillStyle = "#FF0000";
          this.ctx.arc(points[i].x, points[i].y, 2, Math.PI * 2, 0, true);
          this.ctx.fillStyle = "rgb(255,0,255)";
          this.ctx.lineTo(points[i].x, points[i].y);
        }
        this.ctx.closePath();
        this.ctx.stroke();
        this.ctx.fill();
      }
    },
    //摄像头不报警区域结束

    //添加
    add(row) {
      sessionStorage.setItem("deviceType", "camera");
      bus.$emit("homePage", {
        type: "jump",
        path: "/equipmentAdd",
        title: this.$t("m.equipmentAdd").add
      });
    },

    /* 
      点击查询
    */
    search() {
      if (this.formInline.deviceNo == "") {
        this.queryList((this.pageNum = 1), (this.pageSize = 10));
      } else {
        this.queryList(
          this.formInline.deviceNo,
          (this.pageNum = 1),
          (this.pageSize = 10)
        );
      }
    },

    /* 
      键盘事件 按下键盘回车 查询
    */
    enterSearchMember(e) {
      console.log("回车搜索", keyCode, e);
      var keyCode = window.event ? e.keyCode : e.which;
      if (keyCode == 13 && this.formInline.deviceNo != null) {
        if (this.formInline.deviceNo == "") {
          this.queryList((this.pageNum = 1), (this.pageSize = 10));
        } else {
          this.queryList(
            this.formInline.deviceNo,
            (this.pageNum = 1),
            (this.pageSize = 10)
          );
        }
      }
    },

    //修改
    handleEdit(row) {
      console.log(row);
      let device_Info = {
        deviceName: row.deviceName,
        deviceNo: row.deviceNo,
        id: row.id
      };
      sessionStorage.setItem("deviceType", "camera");
      sessionStorage.setItem("deviceEdit", "deviceEdit");
      sessionStorage.setItem("device_Info", JSON.stringify(device_Info));
      bus.$emit("homePage", {
        type: "jump",
        path: "/equipmentAdd",
        title: this.$t("m.equipmentAdd").edit
      });
    },

    //绑定
    bangding(row) {
      console.log(row);
      this.backList = row;
      this.dialogVisible = true;
      this.roomList = [];
      this.getBuildList();
    },

    /* 
      上一页按钮
    */
    handlePrevPage() {
      console.log(this.currentPage, this.pageNum, this.pageSize);
      this.pageNum =
        this.pageNum > this.firstPage ? this.pageNum - 1 : this.firstPage;
      console.log(this.pageNum);
      this.queryList(this.pageNum);
    },

    /* 
      下一页按钮
    */
    handleNextPage() {
      console.log(this.currentPage, this.pageNum, this.pageSize);
      this.pageNum =
        this.pageNum < this.lastPage ? this.pageNum + 1 : this.lastPage;
      console.log(this.pageNum);
      this.queryList(this.pageNum);
    },

    //查询列表
    queryList() {
      let params = new Object();
      params.deviceNo = this.formInline.deviceNo;
      params.pageNum = this.pageNum;
      params.pageSize = this.pageSize;
      this.tableData = []; //请求之前先清空数据
      this.tableLoading = true; //loading加载
      this.$postJson(
        "dmc/camera/queryListWithPage",
        params,
        this.acceptLanguage
      )
        .then(res => {
          if (res.code == 200) {
            if (res.result.list != null) {
              this.pageSize = res.result.pageSize;
              this.currentPage = res.result.pageNum;
              this.totalDataNumber = res.result.total * 1;
              (this.firstPage = res.result.firstPage), //第一页
                (this.lastPage = res.result.lastPage), //最后一页
                (this.tableData = res.result.list);
            } else {
              this.tableData = [];
              this.pageSize = 10;
              this.currentPage = 1;
              this.totalDataNumber = 0;
            }
          } else {
            this.tableData = [];
            this.pageSize = 10;
            this.currentPage = 1;
            this.totalDataNumber = 0;
          }
          setTimeout(() => {
            this.tableLoading = false;
          }, 1000);
        })
        .catch(err => {
          setTimeout(() => {
            this.tableLoading = false;
          }, 1000);
        });
    },

    //获取楼栋列表
    getBuildList() {
      this.$postForm("omc/Building/showAll", {}, this.acceptLanguage).then(
        res => {
          this.buildList = res.result;
        }
      );
    },

    //选择楼栋
    changeBuild(val) {
      this.buildingId = val;
      // this.$refs["floor"].resetField(); //更换了楼栋之后将楼层的数据清空
      this.$refs["room"].resetField(); //更换了楼栋之后将房间的数据清空
      let buildList = this.buildList.filter(item => {
        return item.buildingId == val;
      });
      this.buildingName = buildList[0].buildingName;
      this.floorList = [];
      this.roomList = [];
      //根据楼栋查楼层
      this.$postForm(
        "omc/Building/selectById",
        { buildingId: val },
        this.acceptLanguage
      ).then(res => {
        for (var i = 0; i < res.result.floorNum; i++) {
          this.floorList.push({ floorNo: i + 1 });
        }
      });
      this.changeFloor(1)
    },

    //选择楼层
    changeFloor(val) {
      this.floorNo = val;
      this.$refs["room"].resetField(); //换更楼层之后将房间的数据清空
      this.getRoom(); //获取房间数据
    },

    //根据楼栋楼层获取房间信息
    getRoom() {
      let param = {
        buildingId: this.buildingId,
        floorNo: this.floorNo
      };
      this.roomList = [];
      this.$postJson("omc/Room/queryRoomInfo", param, this.acceptLanguage).then(
        res => {
          this.roomList = res.result;
        }
      );
    },

    //选择房间
    changeRoom(val) {
      this.roomId = val;
      let roomList = this.roomList.filter(item => {
        return item.roomId == val;
      });
      console.log(roomList);
      this.roomName = roomList[0].roomNo;
      this.lifeRoom(this.roomId);
    },

    //通过房间roomId查询
    lifeRoom(lifeRoomId) {
      this.oldName = "";
      this.$postForm(
        "omc/Room/theLifeRoom/" + lifeRoomId,
        {},
        this.acceptLanguage
      ).then(res => {
        console.log(res, "-----");
        this.oldName =
          res.result[0].oldName == null ? "" : res.result[0].oldName;
      });
    },

    //绑定房间号
    bangdingForm(ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          console.log(
            this.buildingName + "-" + this.floorNo + "-" + this.roomName
          );
          let param = {
            deviceId: this.backList.id,
            bindType: 4, //life集团固定传4
            location:
              this.buildingName + "-" + this.floorNo + "-" + this.roomName,
            roomId: this.roomId
          };
          this.$postJson("dmc/camera/bind", param, this.acceptLanguage).then(
            res => {
              if (res.code == 200) {
                this.$message({ message: res.message, type: "success" });
                this.dialogVisible = false;
                this.queryList();
              } else {
                this.$message({ message: res.message, type: "error" });
              }
            }
          );
        }
      });
    },

    /* 
      解绑
    */
    unBind(row) {
      console.log(row);
      this.jiebangDialogVisible = true;
      this.id = row.id;
    },

    //确认解绑
    jiebangCheck() {
      this.$postForm(
        "dmc/camera/untied/" + this.id,
        {},
        this.acceptLanguage
      ).then(res => {
        if (res.code == 200) {
          this.jiebangDialogVisible = false;
          if (res.code == 200) {
            this.queryList();
            this.$message({ message: res.message, type: "success" });
          } else {
            this.$message({ message: res.message, type: "error" });
          }
        }
      });
    },

    /* 
      删除设备
    */

    deleteClick(row) {
      this.id = row.id;
      if (row.bind == true) {
        this.$message({
          message: this.cameraManagement.deviceDeleteMessage,
          type: "error"
        });
      } else {
        this.deletDialogVisible = true;
      }
    },

    //确认删除
    delet() {
      this.$postJson(
        "dmc/camera/deleteById/" + this.id,
        {},
        this.acceptLanguage
      ).then(res => {
        if (res.code == 200) {
          this.deletDialogVisible = false;
          this.queryList();
          this.$message({ message: res.message, type: "success" });
        } else {
          this.$message({ message: res.message, type: "error" });
        }
      });
    },

    //关闭弹窗
    closeBangding() {
      this.$refs.ruleForm.resetFields();
      this.oldName = "";
    },

    //获取设备是否离线状态 by xiang 2020/3/6
    equipmentstatus(row) {
      this.statusDialogVisible = true;
      this.listdeviceId = row.id;
      let param = {
        pageNum: this.listPageNum,
        pageSize: this.pageSize,
        deviceId: this.listdeviceId,
        groupId: sessionStorage.getItem("groupId")
      };
      this.$postJson("dmc/online/queryListWithPage", param).then(res => {
        this.listTotal = Number(res.result.total);
        this.statusList = res.result.list;
      });
    },

    //设备死活翻页 by xiang
    listChangePage(val) {
      this.listCurrentPage = val;
      let param = {
        pageNum: val,
        pageSize: this.pageSize,
        deviceId: this.listdeviceId,
        groupId: sessionStorage.getItem("groupId")
      };
      this.$postJson("dmc/online/queryListWithPage", param).then(res => {
        this.listTotal = Number(res.result.total);
        this.statusList = res.result.list;
      });
    },

    //关闭设备死活弹窗清空
    closeStatusDialogVisible() {
      this.listPageNum = 1;
      this.listCurrentPage = 1;
    },

    /* 
      初始页currentPage、初始每页数据数pagesize和数据data
    */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //改变每页显示的条数
      this.PageSize = val;
      this.queryList();
    },

    /* 
      当前页变化
    */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.queryList();
    },

    /* 
      修改table tr行的背景色
    */
    tableRowStyle({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "background-color: #efefef";
      } else {
        return "background-color: #f9f9f9";
      }
    },

    /* 
      修改table header的背景色
    */
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color:#ffffff;color:#000000;font-weight: 700;";
      }
    }
  },
  created() {},
  mounted() {
    this.queryList();
    bus.$on("refreshCameraList", () => {
      this.queryList();
    });
  },
  destroyed() {
    bus.$off("refreshCameraList");
  }
};
</script>
<style lang="scss" scoped>
/deep/.el-select input {
  width: 150px;
  border: none !important;
  border-bottom: 2px solid #cccccc !important;
  border-radius: 1px;
}
.border {
  width: 10px;
  height: 30px;
  background: black;
  margin-right: 10px;
}
.addBtn {
  color: #7e7e7e;
}
.cancelBtn {
  background: white;
}
.searchBtn {
  background: #409efe;
  color: #ffffff;
}
.jiebangBtn {
  background: #409eff;
  color: #ffffff;
  border-radius: 5px;
}
.detailBtn {
  width: 128px;
  background: #67c23a;
  color: #ffffff;
  border-radius: 5px;
}
.editBtn {
  background: #e6a23c;
  color: #ffffff;
  border-radius: 5px;
}
.deleteBtn {
  background: #dddddd;
  color: #010101;
  border-radius: 5px;
}
.prevPage {
  background: #409efe;
  color: #ffffff;
}
.nextPage {
  background: #ffffff;
}
/deep/ .deviceDialog .el-form-item {
  margin-bottom: 20px !important;
}
/deep/ .deviceDialog .el-form-item__label {
  line-height: 20px !important;
}
/deep/ .deviceDialog-contentOne .el-form-item__content {
  height: 35px !important;
  line-height: 40px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/deep/ .deviceDialog-contentTwo .el-form-item__content {
  height: 35px !important;
  line-height: 30px !important;
}
/deep/ .deviceDialog .el-input__inner {
  height: 20px !important;
  line-height: 20px !important;
}
/deep/ .deviceDialog .el-input__icon {
  height: 120% !important;
}
/deep/ .deviceDialog .el-input {
  width: 150px !important;
}

canvas {
  //background-color: bisque;//by guo 2020-3-17-13:44修改
  position: relative;
  z-index: 99;
}
/* by guo 2020-3-17-13:56添加 */
.canvas-img {
  width: 320px;
  height: 320px;
  position: absolute;
  // top:148px;
  left: 25px;
  z-index: 1;
}
.black {
  color: black;
}
.mag {
  margin: 8px;
}
.example-2 {
  display: flex;
  width: 100%;
}
.example-2 .left {
  flex: 0 0 400px;
  height: 100%;
}
.example-2 .right {
  flex: 1;
  height: 100%;
}
.scorll {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 370px;
}
.pp {
  margin: 3px;
}
.wrapper >>> .el-dialog--center .el-dialog__body {
  padding-top: 5px;
  padding-bottom: 8px;
}
</style>